var data = [{
    id: 1,
    code: 1,
    productName: "品如的衣柜",
    timer: new Date().toLocaleTimeString()
},
{
    id: 2,
    code: 2,
    productName: "蔡徐坤的篮球",
    timer: new Date().toLocaleTimeString()
},
{
    id: 3,
    code: 3,
    productName: "关羽的马",
    timer: new Date().toLocaleTimeString()
},
]
var newarr = data.map((item) => {
    let json = {};
    json.code = item.code;
    json.productName = item.productName;
    json.timer = item.timer;
    return json;
})

$ = id => document.getElementById(id);//获取dom
_c = tagName => document.createElement(tagName);//创建元素
//创建一个方法渲染表格
function renderTable(arr) {
    var tbody = this.$('tbody');
    tbody.innerHTML = '';
    for (var i = 0; i < arr.length; i++) {
        var tr = _c('tr');
        for (k in arr[i]) {
            var td = _c('td');
            td.innerText = arr[i][k];
            tr.appendChild(td)
        }
        var lastTd = _c('td');
        var btn = _c('button');
        btn.innerText = "删除";
        btn.index = i;
        btn.onclick = function () {
            arr.splice(this.index, 1);
            renderTable(arr);
        }
        lastTd.appendChild(btn);
        tr.appendChild(lastTd);
        tbody.appendChild(tr);
    }
}
renderTable(newarr);//直接调用渲染页面

//创建一个方法添加数据
function add(){
    var btn = $('btn');
    var text1 = $('text1');
    var text2 = $('text2');
    if (text1.value.trim() === "" && text2.value.trim() === "") {
        alert("请输入内容");
        return;
    }
    var code = text1.value;
    var productName = text2.value;
    var obj = {
        code: code,
        productName: productName,
        timer: new Date().toLocaleTimeString()
    }
    newarr.push(obj);
    renderTable(newarr);
    text1.value = '';
    text2.value = '';
}
//点击添加按钮，添加数据
btn.onclick = function () {
    add();
}
//全局监听按下enter，按下enter键添加数据
let kd = function (e) {
    if (e.keyCode == 13) {
        add();
    }
}
document.addEventListener('keydown', kd);
//当tbody内容为空时，显示“没有更多数据了”
function tff() {
    setInterval(() => {
        var tfoot = this.$('tfoot');
        var tbody = this.$('tbody');
        if (tbody.innerHTML == '') {
            tfoot.style.display = ''
        } else {
            tfoot.style.display = 'none'
        }
    }, 10);

}
tff();


//搜索内容
function search() {
    var text3 = this.$('text3')
    text3.oninput = function () {
        var newarr2 = []
        for (let i = 0; i < newarr.length; i++) {
            var str = newarr[i].productName;
            var t = text3.value;
            if (str.indexOf(t) !== -1) {
                newarr2.push(newarr[i])
            }
        }
        renderTable(newarr2)
        tff();
    }
}
search();
//验证输入的内容为1-5位的数字
function reg() {

    text1.oninput = () => {

        let t = text1.value;
        let reg = /^[0-9]{1,5}$/
        if (!reg.test(t)) {
            this.btn.setAttribute('disabled', 'disabled')
            alert("请重新输入编号，为1-5位的数字");
            return;
        } else {
            this.btn.removeAttribute('disabled');
        }
    }
}
reg();